<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <view class="head">
            <view>
                <u--text class="h1-title" text="注册" bold size="40"></u--text>
            </view>
        </view>
        <view class="content">
            <u-form :rules="form['register'].rules" :model="form['register'].data"  ref="uForm">
                <view class="c-border">
                    <view class="c-star1"></view>
                    <u--input v-model="form['register'].data.mobile" type="number" border="none" placeholder="输入手机号">
                    </u--input>
                </view>
                <view class="c-border">
                    <view class="c-star2"></view>
                    <u--input v-model="form['register'].data.password" border="none" placeholder="输入密码" :password="true"></u--input>
                </view>
                <view class="c-border">
                    <view class="c-star2"></view>
                    <u--input class="" v-model="form['register'].data.code" border="none" placeholder="输入验证码" :password="true"></u--input>
                    <button class="c-code"  @tap="getSmsCode('register')">发送验证码</button>
                </view>
            </u-form>
        </view>
        <view class="main">
            <button class="m-register" @click="submit">注册</button>
            <view class="m-login" @click="$Router.push('/pages/user/login')">账号登录</view>
        </view>
    </view>
</template>
<script>
    var _self;
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        data() {
            return {
                codeText: '获取验证码',

                form: {
                    register: {
                        data: {
                            mobile: '', // 手机号
                            password: '', // 密码
                            code: '', // 密码

                        },
                        rules: {

                        },
                        error: {
                            mobile: '', // 手机号
                            code: '', // 验证码
                            password: '' // 密码
                        }
                    }
                },
                disabledCode: false,
                placeholderStyle: 'font-size: 30rpx; font-weight: 500;color:#C2C7CF;'
            }
        },
        components:{
        },
        onLoad(e){
            _self = this;

        },
        onReady() {
            //onReady 为uni-app支持的生命周期之一
            this.$refs.uForm.setRules(this.form['register'].rules)
        },
        computed: {
          
        },
        methods: {
            ...mapActions(["getUserInfo"]),
            // 获取短信验证码
            getSmsCode(type) {
                const that = this;
                if(!uni.$u.test.mobile(that.form['register'].data.mobile)){
                    _self.$u.toast('请输入正确的手机号码');
                    return false;
                }
                    uni.$u.http.post(
                        'common.smsSend',
                        {
                            mobile: that.form['register'].data.mobile,
                            event: type
                        },
                        '获取验证码中...'
                    ).then(res => {
                        if (res.code === 1) {
                            that.codeChange();
                            that.$u.toast('验证码已发送，请注意查收短信');
                        } else {
                            that.$u.toast(res.msg);
                        }
                    });

            },

            // 倒计时
            codeChange() {
                if (this.disabledCode) return;
                this.disabledCode = true;
                let n = 10;
                this.codeText = n + 's';
                const run = setInterval(() => {
                    n -= 1;
                    if (n < 0) {
                        clearInterval(run);
                    }
                    this.codeText = n + 's';
                    if (this.codeText < 0 + 's') {
                        this.disabledCode = false;
                        this.codeText = '重新获取';
                    }
                }, 1000);
            },
            // 3.注册
            async submit() {
                let that = this;
                this.$refs.uForm.validate().then(res => {
                    uni.$u.http.post(
                        'user/register',
                        {
                            mobile: that.form['register'].data.mobile,
                            code: that.form['register'].data.code,
                            password: that.form['register'].data.password,
                        }
                    )
                        .then(res => {
                            that.getUserInfo(res.data.token);
                            that.$u.toast(res.msg);
                            that.$Router.push('/pages/index/user');
                        })

                }).catch(errors => {
                    uni.$u.toast('校验失败')
                })

            },
        }
    }
</script>

<style lang="scss" >
    .head{
        width: 85%;
        margin: auto;
        padding-top: 120rpx;
        padding-bottom: 180rpx;
        height: 170rpx;
        .h1-title{
            height: 110rpx;
        }
    }
    .content{
        width: 85%;
        margin: auto;
        margin-top: 80rpx;
        .c-border{
            background-color:#f5f7f7;
            height: 100rpx;
            margin-top: 40rpx;
            border-radius: 60rpx;
            display: flex;
            justify-content: center;
            .c-star1{
                /*width: 17%;*/
                width: 8%;
                font-size: $font-lt;
                text-align: center;
                line-height: 100rpx;
                color: #202020;
                font-weight: 500;
            }
            .c-star2{
                width: 8%;
                line-height: 100rpx;
                color: #9a9a9a;
            }
            .c-code{
                width: 35%;
                line-height: 100rpx;
                font-size: $font-lt;
                font-weight: bold;
                color: #707070;
            }
        }
    }
    .main{
        width: 85%;
        margin: auto;
        margin-top: 90rpx;
        .m-register{
            height: 100rpx;
            border-radius: 60rpx;
            background: linear-gradient(to right, #ffb81f, #ffc64c);
            /*background-color: #266eff;*/
            color: white;
            text-align: center;
            line-height: 100rpx;
            font-size: $font-max;
            font-weight: bold;
        }
        .m-login{
            margin-top: 20rpx;
            height: 90rpx;
            line-height: 90rpx;
            text-align: center;
            font-size: 34rpx;
            font-weight: bold;
            color: #9a9a9a;
        }
    }
    .foot{
        width: 100%;
        padding-bottom: 50rpx;
        position: absolute;
        bottom: 0;
        .wxicon{
            margin: auto;
            width: 90rpx;
        }
    }
</style>
